<template>
    <div class="center">
        <div class="enchange">
            <div class="enchange-title">
                <h2>快速兑换</h2>
                <p>请在下方输入框中输入优惠券卡号或者尊享卡卡密</p>
            </div>
            <div class="enchange-form">
                <div class="enchange-input">
                    <input type="text" placeholder="请输入优惠券卡号或者尊享卡卡密" v-model="msg">
                    <span id="msg"></span>
                </div>
                <span class="submit" @click="ischeck">去选购商品</span>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                msg: '',
            }
        },
        methods: {
            ischeck() {
                //console.log(this.msg);
                if(this.msg == ''){
                    msg.innerHTML = '请输入优惠券卡号或者尊享卡卡密'
                }else{
                    console.log(this.msg);
                }
            }
        },
    }
</script>

<style lang="scss" scoped>
*{
    padding: 0;
    margin: 0;
}
.center{
    width: 500px;
    margin: 0 auto;
}
.enchange{
    width: 500px;
    height: 100vw;
    padding-top: 85px;
    background-color: #fff;
}
.enchange .enchange-title{
    margin-left:100px;
}
.enchange .enchange-title h2{
    font-size: 16px;
    color: #72462d;
    font-weight: normal;
}
.enchange .enchange-title p{
    font-size: 12px;
    color: #5e5e5e;
}
.enchange .enchange-form{
    margin-left: 100px;
    margin-top: 30px;
}
.enchange .enchange-form .enchange-input{
    margin-bottom: 30px;
    height: 60px;
}
.enchange .enchange-form input{
    width: 295px;
    height: 36px;
    border: 1px solid #cfcfcf;
    line-height: 36px;
    padding-left: 5px;
    display: inline-block;
    outline: none;
}
.enchange .enchange-form #msg{
    color: #FF714D;
    display: inline-block;
    margin-left: 10px;
    margin-top: 5px;
}
.enchange .enchange-form .submit{
    display: block;
    width: 302px;
    height: 48px;
    background-color: #684029;
    color: #fff;
    font-size: 18px;
    text-align: center;
    line-height: 48px;
    cursor: pointer;
}
::-webkit-input-placeholder{
    color: #ccc;
}
</style>